{% extends "park/base.html" %}

{% block css %}
{% endblock %}

{% block content %}
    <script type="text/javascript">
        var primary_menu = "menu_2";
        var sub_menu = "menu_2_2";
    </script>
    <div class="col-md-12">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <div class="panel-title"><h3>产品明细</h3>总使用量 {{ sum.result }}（t/a）</div>
                        <div class="panel-options">
                           <form role="form" method="get" enctype="" class="form-horizontal pull-left">
                                <div class="form-group">
                                    <label class="control-label">填报批次：</label>
                                    <div>
                                        <select id='f-fill' class="form-control" name="fill">
                                            {% for f in fills %}
                                                <option value='{{ f.id }}'>{{ f.fill_key }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">是否危险品：</label>
                                    <div>
                                        <select id='f-is_danger' class="form-control" name="is_danger">
                                            <option value=''>全选</option>
                                            <option value='1'>是</option>
                                            <option value='0'>否</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group short-group1">
                                    <label class="control-label">是否重点危险品：</label>
                                    <div>
                                        <select id='f-is_emphasis' class="form-control" name="is_emphasis">
                                            <option value=''>全选</option>
                                            <option value='1'>是</option>
                                            <option value='0'>否</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group filter-btn">
                                    <button type="submit" class="btn btn-green">查询</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="panel-body with-table">
                        <table class="table table-bordered table-responsive">
                            <thead>
                            <tr>
                                <th><a id='th1' data-oper='<' href='javascript:sortTr("data-id", "data-oper", "th1");' class="filter-btn" href="#" data-rel="reload">▾</a> 序号</th>
                                <th>产品名称</th>
                                <th>CAS号</th>
                                <th>是否属于危险化学品</th>
                                <th>是否属于重点环境管理危化品</th>
                                <th><a id='th2' data-oper='<' href='javascript:sortTr("data-id", "data-oper", "th2");' class="filter-btn" href="#" data-rel="reload">▾</a> 总使用量（t/a）</th>
                               <!--  <th>生产区最大存量（吨）</th>
                                <th>贮存区最大存量（吨）</th> -->
                            </tr>
                            </thead>
                            <tbody id='trlist'>
                                {% for d in data %}
                                    <tr data-id='{{ forloop.counter }}' data-amount='{{ d.total_usage_amount }}'>
                                        <td>{{ forloop.counter }}</td>
                                        <td>{{ d.name }}</td>
                                        <td>{{ d.cas }}</td>
                                        <td>{{ d.is_dangerous }}</td>
                                        <td>{{ d.is_emphasis }}</td>
                                        <td>{{ d.total_usage_amount }}</td>
                                    </tr>
                                {% empty %}
                                    <tr>
                                        <td colspan=8 style='text-align:center;'>暂无数据</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        <div class="row">
                            <div class="col-xs-6 col-left">
                                <div class="dataTables_info" id="table-3_info"></div>
                            </div>
                            <div class="col-xs-6 col-right">
                                <div class="dataTables_paginate paging_bootstrap" style="text-align: right;margin-right: 10px">
                                    <ul class="pagination pagination-sm" >
                                        {% if ms.has_previous %}
                                            <li><a href="?page={{ ms.previous_page_number }}">上一页</a></li>
                                        {% else %}
                                            <li class="disabled"> <span>上一页</span></li>
                                        {% endif %}
                                        {% for p in paginator.page_range %}
                                            {% ifequal p ms.number %}
                                                <li class="active"> <span class="p">{{p}}</span></li>
                                            {% else%}
                                                <li> <a href="?page={{ p }}">{{p}}</a></li>
                                            {% endifequal %}
                                        {% endfor %}
                                        {% if ms.has_next %}
                                            <li class="next">  <a href="?page={{ ms.next_page_number }}">下一页</a></li>
                                        {% else %}
                                            <li class="disabled"><span>下一页</span></li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

{% endblock %}

{% block js %}
<script type='text/javascript'>
    ;$(function(){
        $('#f-is_danger').val('{{ is_danger }}');
        $('#f-is_emphasis').val('{{ is_emphasis }}');
        $('#f-fill').val('{{ fill_key }}');
    });

     function sortTr(key, oper, el){
      var el = $('#'+el)[0];
      var operIco = { '<':'▴', '>':'▾' };

      $._oper = el.getAttribute(oper);
      var sortTr = function (a,b){
        var a = parseInt(a.getAttribute(key));
        var b = parseInt(b.getAttribute(key));
        var oper = $._oper;
        return eval(a + oper +b) ? 1 : -1;
      };
      // 添加 $.sort 扩展函数 在 base.html 中
      $('#trlist tr').sort(sortTr).appendTo('#trlist');

      var reOper = $._oper == '>' ? '<' : '>';
      el.setAttribute(oper, reOper);
      el.innerHTML = operIco[reOper];

   } 
</script>
{% endblock %}